設定style屬性

上一篇有提到我們可以在React.createElement的第二個參數設定React元素屬性，而style樣式也是屬性的一種，只是它是一個個key + value組合成的物件，以下為用React元素的方式增加style樣式:

• 要注意的是屬性名稱若有兩個以上的單字，要用Camel-case (駝峰式命名)。

Camel-case 駝峰式命名:
第一個單字以小寫字母開始；第二個單字的首字母大寫，如： firstName、lastName、myFunction。

const e = React.createElement("input",{
	syle:{
		color: "red",
		border:  "1px solid green",
		borderRadius: "4px"  //若有兩個以上的單字要用Camel-case
	};
});

設定事件屬性

• 宣告函式

<div id='root'></div>

function myFunction() {
  alert("Hello world!");
}

let e = React.createElement("input", {
  onInput: myFunction   //直接給function名稱，不需加小括號()
});

let myRoot = document.getElementById("root");
ReactDOM.render(e, myRoot);

• 匿名函式

<div id='root'></div>

let e2 = React.createElement("input",{
  onInput: () => {
    alert("Hello world!")
  }
});

let myRoot = document.getElementById("root");
ReactDOM.render(e2, myRoot);